<html>
    <head>
        <title>插件</title>
    </head>
    <body>
        <script>
            // 插件

                    /*
                        插件通常用来为 Vue 添加全局功能。 插件的功能范围没有严格的限制---- 一般有以下几种：
                             1.添加"全局方法"或者 "全局属性"  
                                      如: vue-custom-element
                             2.添加全局资源：  指令、过滤器、过渡等.
                                    如: vue-touch
                             3.通过全局混入来添加一些组件选项。
                                    如：vue-router
                             4.添加Vue实例方法，通过把他们添加到Vue.prototype 上实现

                             5.一个库，提供自己的API，同时提供上面提到的一个或多个功能 。 如 vue-router

                    */


                    // 一、使用插件
                              // 通过全局方法 Vue.use() 使用插件。它需要在你调用 new Vue() 启动应用之前完成.

                                   // 调用 "MyPlugin.install(Vue)"
                                        Vue.use(MyPlugin);

                                        new Vue({
                                            // ...组件选择
                                        })

                                // 也可以传入一个可选的选项对象：
                                        Vue.use(MyPlugin,{someOption:true})

                                /*
                                    Vue.use 会阻止多次注册相同的插件，届时即使多次调用只会注册一次该插件。
                                */

                                /*
                                    Vue.js 官方提供的一些插件(例如：　vue-router) 在检测到Vue 是可访问的全局变量时会自动调用Vue.use().
                                    然而在想CommonJS这样的模块中，你应该始终显式地调用Vue.use():
                                */  
                                        // 用Browerify 或 webpack 提供的CommonJS模块环境时:
                                            var Vue = require('vue')
                                            var VueRouter =require('vue-router')
                                        
                                        // 不要忘了调用此方法
                                            Vue.use(VueRouter)
  
                                // https://github.com/vuejs/awesome-vue#components--libraries    提供了大量由社区贡献的插件和库。


                    // 二、开发插件
                                /*
                                    Vue.js 的插件婴爱暴露一个 install 方法。
                                    这个方法的第一个参数是 Vue构造器，第二个参数是一个"可选的选项对象"：
                                */

                                        MyPlugin.install = function(Vue,options){
                                            // 1. 添加全局方法 或  property(属性)
                                            Vue.myGlobalMethod= function(){
                                                // 逻辑...
                                            }

                                            // 2.添加全局资源(全局指令)
                                            Vue.dorective('my-directive',{
                                                bind(el,binding,vnode,oldValue){
                                                    // 逻辑...
                                                }
                                            })

                                            // 3. 注入组件选项
                                            Vue.mixin({
                                                create:function(){
                                                    // 逻辑....
                                                }
                                            })

                                            // 4.添加实例方法
                                            Vue.prototype.$myMethod= funciton(methodOptions){
                                                // 逻辑....
                                            }
                                        }
                               
        </script>
    </body>
</html>